<template>
	<view class="content">
		<view class="menu-block block">
			<view class="img">
				<img :src="detail.faceUrl" style="width: 100%;height: 100%;" />
			</view>
			<view class="text">
				<view class="line">
				</view>
				<view class="title">
					{{detail.name}}
				</view>
				<view class="small-title">
					{{detail.major}} / {{detail.counsellingCount}}次
				</view>
				<view class="small-title">
					<image
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/NAME.png">
					</image>
				</view>
			</view>
		</view>
		<view class="menu-block2 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					联系方式
				</view>
			</view>
			<view class="iphone-content" style="margin-bottom: 10rpx;">
				<view class="data" style="border-bottom: 2px solid #EEEEEE;padding-bottom: 30rpx;">
					<view class="money-title">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/phone.png"
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.phoneMi}}
					</view>
				</view>
				<view class="iconfont" @click="callPhone(detail.phone)"
					style="display: flex;flex-direction: column;align-items: center;">
					<image class="img"
						src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dianhua-icon.png">
					</image>
					<view class="play" style="text-align: center;">拨打</view>
				</view>
			</view>
			<view class="iphone-content">
				<view class="data">
					<view class="money-title" style="width: 45rpx;">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/wx.png"
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.vxMi}}
					</view>
				</view>
				<view class="iconfont" @click="share" style="display: flex;flex-direction: column;align-items: center;">
					<image class="img"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/sm.png">
					</image>
					<view class="play" style="text-align: center;">扫一扫</view>
				</view>
			</view>
		</view>
		<view class="menu-block1 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					简介
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iSinfo}">
					{{detail.introduction}}
				</view>
				<view class="text" @tap="showinfo" v-if="!iSinfo">【查看全部】</view>
			</view>
			<view class="text" @tap="showinfo" v-if="iSinfo">【收起】</view>
		</view>
		<view class="menu-block1 block">

			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					辅导成功案例
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue}">
					{{detail.successCases}}
				</view>
				<view class="text" @tap="showTrue" v-if="!iStrue">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue" v-if="iStrue">【收起】</view>
		</view>
		<view class="menu-block1 block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					服务内容
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue1}">
					{{detail.serviceContent}}
				</view>
				<view class="text" @tap="showTrue1" v-if="!iStrue1">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue1" v-if="iStrue1">【收起】</view>
		</view>
		<view class="menu-block3 block">
			<view class="top">

				<view class="title-top">
					<view class="tips"></view>
					<view class="title">
						评价 ({{count}})
					</view>
				</view>
				<view class="top-right" @click="navigate('/page_other/teacher/comment?id='+id+'&type='+type)">
					<view class="moreText">
						查看全部
					</view>
					<image class="more"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
					</image>
				</view>
			</view>
			<view class="middle" v-if="comment!=''">
				<view class="head">
					<image class="head-img" :src="comment[0].faveUrl"></image>
				</view>
				<view class="middle-right">
					<view class="middle-right-top">
						<view class="phone">
							{{comment[0].userName||'游客'}}
						</view>
						<view class="score">
							<uni-rate v-model="comment[0].score" @change="onChange" :readonly="true" active-color="red"
								:size="14" />
						</view>
					</view>
					<view class="middle-right-middle">
						{{comment[0].content}}
					</view>
					<view class="middle-right-bottom">
						{{comment[0].createTime}}
					</view>
				</view>
			</view>
			<view class="" v-else style="margin: 40rpx auto;width: 150rpx;">
				暂无评价
			</view>
		</view>
		<ShareDialog v-if="shareShow" cancelText="点击图片保存" confirmText="取消" @callback="shareCallback">
			<slot style="display: flex;flex-direction: column;">
				<view class="">
					微信号：{{detail.vx}}
				</view>
				<image @click="preview(shareImg)" :src="shareImg" style="height: 780rpx;">
				</image>
			</slot>
		</ShareDialog>
	</view>
</template>

<script>
	import {
		getMentorInfoByIdApi,
		getCommentByTypeList,
		addCounsellingCount
	} from '@/api/teacher.js';
	import {
		getStorage,
		removeStorage
	} from '@/util/auth.js';
	import ShareDialog from '@/page_other/components/SuccessDialog/ShareDialog.vue';
	export default {
		data() {
			return {
				id: null,
				iStrue: false,
				iSinfo: false,
				iStrue1: false,
				count: 1,
				detail: {
					name: '',
					major: '',
					phone: '',
					counsellingCount: '',
					createTime: '',
					faceUrl: '',
					introduction: '',
					phoneMi: '',
					serviceContent: '',


				},
				shareImg: '',
				shareShow: false,
				rateValue: 4,
				comment: [],
				type: 2,
			}
		},
		components: {
			ShareDialog
		},
		methods: {
			goDl() {
				const hasToken = getStorage('token');
				const user = getStorage('user');
				if (user && hasToken) {
					return true;
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_other/login/select'
								})
							}
						}
					})

				}
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			onChange(e) {
				console.log(e)
			},
			preview(photoImage) {
				let imgsArray = [];
				imgsArray[0] = photoImage
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			share() {
				const hasToken = getStorage('token');
				const user = getStorage('user');
				const id = this.id
				if (user && hasToken) {
					this.shareImg = this.detail.vxImage
					this.shareShow = true;
					addCounsellingCount({
						id: id,
					}).then(data => {
						console.log(data)
					})
				} else {
					this.goDl()
				}
			},
			shareCallback(e) {
				if (e) {
					this.shareShow = false;
				}
			},
			callPhone(e) {
				const hasToken = getStorage('token');
				const user = getStorage('user');
				const id = this.id
				if (user && hasToken) {
					uni.makePhoneCall({
						phoneNumber: e,
						success() {
							console.log('拨打成功了');
							addCounsellingCount({
								id: id,
							}).then(data => {
								console.log(data)
							})
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					this.goDl()
				}
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue1() {
				this.iStrue1 = !this.iStrue1
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			getListDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getMentorInfoByIdApi({
					id: this.id
				}).then(data => {
					uni.hideLoading()
					this.detail = data
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getCommentByTypeList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getCommentByTypeList({
					page: 1,
					limit: 10,
					type: this.type,
					relationId: this.id,
					commentType: 1,
				}).then(data => {
					uni.hideLoading()
					this.count = data.count
					this.comment = data.list
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.id = e.id
			this.getCommentByTypeList()
			this.getListDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.title-top {
		display: flex;

		.tips {
			width: 18rpx;
			height: 32rpx;
			border-radius: 20rpx;
			background-color: #0256FF;
			margin: 16rpx 12rpx 0 0;
		}

		.title {
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}

	}

	.menu-block2 {
		width: 92%;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;

		.text {
			line-height: 60rpx;
		}

		.item {
			margin: 13rpx 15rpx 0 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.skill-item {
				width: calc((100% - 20rpx)/5);
				height: 65rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E2E9F9;
				color: #1257FF;
				margin: 0 25rpx 25rpx 0;
			}
		}

		.skill {
			display: flex;
			flex: wrap;
		}

		.title {
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}

		.data {
			width: calc((100% - 150rpx));
			display: flex;
			color: #767676;
			font-size: 30rpx;
			// margin-top: 20rpx;
			color: #000;
			margin-top: 35rpx;
		}

		.count {
			margin: 0 0 0 10rpx;
		}

		.project-content {
			line-height: 60rpx;
		}

		.iphone-content {
			display: flex;
			justify-content: space-between;

			.money-title {
				width: 44rpx;
				height: 42rpx;
			}

			.iconfont {
				width: 120rpx;

				.img {
					margin: 0 auto 10rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.play {
					font-size: 28rpx;
					color: #767676;
				}
			}
		}
	}

	.menu-block1 {
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;

		.title {
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.data {
			display: flex;
			color: #767676;
			font-size: 30rpx;
			margin-top: 20rpx;
		}

		.count {
			margin: 7rpx 0 0 10rpx;
		}

		.info {
			display: flex;
			flex-direction: column;


			view {
				text-align: justify;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 60rpx;
				word-break: break-word; //换行模式
				background-color: #fff;

			}

			.text {
				width: 95px;
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #1156FF;
				opacity: 1;
			}
		}

		.text {
			width: 95px;
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: end;
			color: #1156FF;
			opacity: 1;
		}


		.hide {
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 60rpx;
			overflow: hidden;
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}

	}

	.menu-block3 {
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;

		// margin-bottom: 50rpx;
		.top {
			width: 100%;
			height: 44px;
			display: flex;
			justify-content: space-between;

			// align-items: center;
			.title {
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-bottom: 25rpx;
			}

			.top-right {
				display: flex;
				margin-top: 10rpx;

				.moreText {
					font-size: 28rpx;
					color: #999;

				}

				.more {
					width: 23rpx;
					height: 23rpx;
					color: #999;
					margin: 9rpx 0 0 5rpx;
				}
			}
		}

		.middle {
			display: flex;
			width: 100%;

			.head {
				width: 20%;
				border-radius: 80rpx;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					background-color: #999;
					border-radius: 80rpx;
				}

			}

			.middle-right {
				width: 80%;

				.middle-right-top {
					margin-top: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.phone {
						color: #000;
						font-size: 28rpx;
					}

				}

				.middle-right-middle {
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #1A1A1A;
					line-height: 48rpx;
				}

				.middle-right-bottom {
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #767676;
				}
			}

		}
	}

	.menu-block {
		display: flex;
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;

		.img {
			position: relative;
			width: 70%;
			height: 400rpx;
			background-color: #F8F8F8;
			margin-right: 50rpx;
			margin-top: 30rpx;

			img {
				position: absolute;
				top: -30rpx;
				right: -30rpx;
				border-radius: 20rpx;
			}
		}

		.text {
			width: 230px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.line {
				width: 10rpx;
				height: 100rpx;
				background-color: #F4F4F4;
				margin: 20rpx 0;
			}

			.title {
				font-weight: 900;
				font-size: 40rpx;
				color: #000;
				margin-bottom: 25rpx;
			}

			.small-title {
				font-size: 28rpx;
				color: #767676;
				line-height: 44rpx;
				margin-bottom: 25rpx;

				image {
					width: 100%;
					height: 90rpx;
				}
			}

		}
	}
</style>